<template>
    <div class="app-data-staff data-store-statistics">
        <div class="app-header app-fixed-top">
            <span class="show-content">时间范围：<span class="type-content">{{allotDateStart}}至{{allotDateEnd}}</span></span>
            <div class="action-content">
                <mt-button class="btn-filter" type="danger" @click="handleFilter">筛选</mt-button>
            </div>
        </div>

        <!--弹窗-列表筛选-->
        <mt-popup v-model="popupFilterShow"
                position="right" class="filter-popup">
          <dl class="filter-list">
            <dd class="filter-item">
              <span class="addon">选择时间</span>
              <dl class="date-list">
                <dd class="date-item" v-for="(item,index) in dateList" :class="{active:curIndex==index,'date-select':index==3}" @click="handleSelectDate(index)">
                  <span class="date-title">{{item}}</span>
                </dd>
              </dl>
              <template v-if="isDateFrame">
                <mt-field label="开始时间" placeholder="请选择开始时间" type="text" v-model="allotDateStart" readonly="readonly" @click.native="openPicker('start')"></mt-field>
                <mt-field label="结束时间" placeholder="请选择结束时间" type="text" v-model="allotDateEnd" readonly="readonly" @click.native="openPicker('end')"></mt-field>
              </template>
            </dd>
            <dd class="filter-item">
              <span class="addon">选择门店<mt-button class="action-seclect" type="primary" @click="handleSelectAll">{{selectText}}</mt-button></span>
              <div class="people-item" v-if="optionsPeopleNameF.length>0">
                <mt-checklist
                  class="select-staff"
                  title=""
                  v-model="selectPeopleNameF"
                  :options="optionsPeopleNameF">
                </mt-checklist>
              </div>
            </dd>
          </dl>
            <!--<mt-field label="员工" placeholder="请选择员工" type="text" v-model="search.staff" readonly="readonly"></mt-field>-->
            <div class="button-content">
                <div class="button-block-6">
                    <mt-button type="default" @click="popupFilterShow=false">取消</mt-button>
                </div>
                <div class="button-block-6">
                    <mt-button type="danger" @click="handleSure">确认</mt-button>
                </div>
            </div>
        </mt-popup>
        <!--弹窗-列表筛选-->

        <mt-datetime-picker
        ref="picker"
        v-model="pickerValue"
        type="date"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        :startDate="startDate"
        :endDate="endDate"
        @confirm="handleDateChange">
        </mt-datetime-picker>
        <section class="app-main">
            <table class="data-staff-list">
                <tr class="data-list list-header">
                    <td width="20%">门店</td>
                    <td width="12%">工单数</td>
                    <td width="12%">已完成</td>
                    <td width="12%">未完成</td>
                    <td width="22%">平均接单用时</td>
                    <td width="22%">平均完成用时</td>
                </tr>
                <tr class="data-list" v-for="item in dataStaff">
                    <td>{{item.memberName}}</td>
                    <td>{{item.totalCount}}</td>
                    <td>{{item.finishCount}}</td>
                    <td>{{item.unfinishCount}}</td>
                    <td>{{item.avgTimeReceived}}</td>
                    <td>{{item.avgTime}}</td>
                </tr>
            </table>
        </section>
    </div>
</template>

<script>
    import {Header, Cell, Toast,DatetimePicker} from 'mint-ui';
    export default {
        data () {
            return {
                curIndex:0,
                dateList:['今日','昨日','本月','自定义日期范围'],
                isDateFrame:false,
                dataStaff:[],
                popupFilterShow:false,
                pickerValue:new Date('2018'),
                startDate:new Date('2018'),
                endDate:new Date(),
                isSelectStart:true,
                startTime:'',
                endTime:'',
                selectText:'全不选',
                optionsPeopleNameF:[],
                selectPeopleNameF:[],
                allotDateStart:'',
                allotDateEnd:'',
                search:{
                    allotDateStart:'',
                    allotDateEnd:'',
                    memberList:[],
                }
            }
        },
        created(){
          const d = new Date();
          const year=d.getFullYear();
          var month='';
          var date='';
          if(d.getMonth()+1<=9){
            month='0'+(d.getMonth()+1)
          }else{
            month=d.getMonth()+1
          };
          if(d.getDate()+1<=9){
            date='0'+d.getDate()
          }else{
            date=d.getDate()
          };
          this.startTime=d.getTime();
          this.endTime=d.getTime();
          this.allotDateStart=year + '-' + month + '-' + date;
          this.allotDateEnd=year + '-' + month + '-' + date;

//          获取到全部人员后再获取统计的数据
          var _this=this;
          _this.getData().then(function(data){
            _this.search.memberList=[]
            for(var i=0;i<data.length;i++){
                  const item={
                    id:data[i].value,
                    name:data[i].label,
                  }
              _this.search.memberList.push(item)
            }
            _this.search.allotDateStart=_this.allotDateStart+' 00:00:00';
            _this.search.allotDateEnd=_this.allotDateEnd+' 23:59:59';
            var params = new URLSearchParams();
//            params.append('allotDateStart',_this.search.startDate+' 00:00:00');
            params.append('paramData',JSON.stringify(_this.search));
            _this.$axios({
              method: 'post',
              url:'gp/declaration/storeTeamStats',
              data:params
            }).then((res)=>{
              if(res.data.statusCode==200){
              console.log(res)
              _this.dataStaff=res.data.object;
            }

          })
          })
        },
      watch:{
        /**选择派工管理员事件**/
        'selectPeopleNameF'(val){
          this.search.memberList=[];
          for(var i=0;i<val.length;i++){
            for(var j=0;j<this.optionsPeopleNameF.length;j++){
              if(val[i]==this.optionsPeopleNameF[j].value){
                const item={
                  id:this.optionsPeopleNameF[j].value,
                  name:this.optionsPeopleNameF[j].label,
                }
                this.search.memberList.push(item)
              }
            }
          }

          if(val.length==this.optionsPeopleNameF.length){
            this.selectText='全不选';
          }else{
            this.selectText='全选';
          }


        },
      },
        methods: {

            getData(){

              var that=this;
              var test=new Promise(function(resolve, reject){

                that.optionsPeopleNameF=[];
                that.selectPeopleNameF=[];
                /** 获取门店列表 **/
                var params = new URLSearchParams();
                params.append('page',1);
                params.append('pageRow',500);
                that.$axios({
                  method: 'post',
                  url:'gp/dataStatics/getStoreList',
                  data:params
                }).then((res)=>{

                  for(var i=0;i<res.data.object.rows.length;i++){
                  const item={
                    label:res.data.object.rows[i].storeName,
                    value:res.data.object.rows[i].id,
                  }
                  that.optionsPeopleNameF.push(item)
                  that.selectPeopleNameF.push(item.value)
                }
                resolve(that.optionsPeopleNameF)
              })

              });

              return test;

          },

          dateHandle(d){
            const year=d.getFullYear();
            var month='';
            var date='';
            if(d.getMonth()+1<=9){
              month='0'+(d.getMonth()+1)
            }else{
              month=d.getMonth()+1
            };
            if(d.getDate()+1<=9){
              date='0'+d.getDate()
            }else{
              date=d.getDate()
            };

            var fmt=year + '-' + month + '-' + date;
            return fmt
          },
          handleSelectDate(index){
            this.curIndex=index;

            switch(index)
            {
              case 0:
                var thisDate = new Date();
                this.allotDateStart=this.dateHandle(thisDate)
                this.allotDateEnd=this.dateHandle(thisDate)
                break;
              case 1:
                var thisDate = new Date();
                thisDate.setDate(thisDate.getDate() - 1);
                this.allotDateStart=this.dateHandle(thisDate)
                this.allotDateEnd=this.dateHandle(thisDate)
                break;
              case 2:
                var thisDate = new Date();
                thisDate.setDate(1);//本月第一天
                this.allotDateStart=this.dateHandle(thisDate)
                thisDate.setMonth(thisDate.getMonth()+1);//下个月
                thisDate.setDate(thisDate.getDate() - 1);//下个月第一天减1得到本月最后一天
                this.allotDateEnd=this.dateHandle(thisDate)
                break;
            };

            this.search.allotDateStart=this.allotDateStart+' 00:00:00';
            this.search.allotDateEnd=this.allotDateEnd+' 23:59:59';

            if(index==3){
              this.isDateFrame=true;
              this.openPicker('start');
            }else{
              this.isDateFrame=false;
            }
          },
            handleFilter(){
                this.popupFilterShow=true
            },
            openPicker(type) {
                if(type=='start'){
                    this.isSelectStart=true
                }else if(type=='end'){
                    this.isSelectStart=false;
                }
                this.$refs.picker.open();
            },
            handleDateChange(){
                const d = new Date(this.pickerValue);
                const year=d.getFullYear();
                var month='';
                var date='';
                if(d.getMonth()+1<=9){
                    month='0'+(d.getMonth()+1)
                }else{
                    month=d.getMonth()+1
                };
                if(d.getDate()+1<=9){
                    date='0'+d.getDate()
                }else{
                    date=d.getDate()
                };

                if(this.isSelectStart==true){
                    this.startTime=d.getTime();
                    this.allotDateStart=year + '-' + month + '-' + date;
                    this.search.allotDateStart=this.allotDateStart+' 00:00:00';
                }else if(this.isSelectStart==false){
                    this.endTime=d.getTime();
                    this.allotDateEnd=year + '-' + month + '-' + date;
                    this.search.allotDateEnd=this.allotDateEnd+' 23:59:59';
                 }
            },
            handleSure(){
                if(this.startTime>this.endTime){
                    Toast({
                        message: '请选择正确的时间范围',
                        position: 'middle',
                        duration:800
                    });
                    return false;
                }
              if(this.selectPeopleNameF.length<=0){
                Toast({
                  message: '请选择门店',
                  position: 'middle',
                  duration:800
                });
                return false;
              }

              var params = new URLSearchParams();
              params.append('paramData',JSON.stringify(this.search));
              this.$axios({
                method: 'post',
                url:'gp/declaration/storeTeamStats',
                data:params
              }).then((res)=>{
                if(res.data.statusCode==200){
                console.log(res)
                this.dataStaff=res.data.object;
                this.popupFilterShow=false
              }else{
                this.popupFilterShow=false
              }

            })
            },
          handleSelectAll(){
            if(this.selectText=='全不选'){
              this.selectText='全选';
              this.selectPeopleNameF=[];

            }else if(this.selectText=='全选'){
              this.selectPeopleNameF=[];
              this.selectText='全不选';
              for(var i=0;i<this.optionsPeopleNameF.length;i++){
                this.selectPeopleNameF.push(this.optionsPeopleNameF[i].value)
              }
            }
        }
        }
    }
</script>
<style src="../../../static/member-center.css"></style>
<style>
    /*@import '../../../static/mebase.css'*/
</style>
